<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="portal" uri="/WEB-INF/portal.tld" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<%@ include file="/common/plateform/include/common-base.jsp"%>
	<title>主题选择</title>
</head>
<body>
<!-- Main start -->
<section class="content">
	<div class="row">
		<div class="col-xs-12">

			<!------搜索  start ------->
			<div class="box box-info box-solid">
				<div class="box-body">
					<ul class="list-unstyled clearfix">

						<li style="float:left; width: 33.33333%; padding: 5px;" theme-name="skin-purple">
							<a href="javascript:void(0);" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
								<div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-purple-active"></span>
									<span class="bg-purple" style="display:block; width: 80%; float: left; height: 7px;"></span>
								</div>
								<div>
									<span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span>
									<span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
								</div>
							</a>
							<p class="text-center no-margin">skin-purple</p>
						</li>

						<li style="float:left; width: 33.33333%; padding: 5px;" theme-name="skin-green	">
							<a href="javascript:void(0);" data-skin="skin-green" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
								<div>
									<span style="display:block; width: 20%; float: left; height: 7px;" class="bg-green-active"></span>
									<span class="bg-green" style="display:block; width: 80%; float: left; height: 7px;"></span>
								</div>
								<div>
									<span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span>
									<span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
								</div>
							</a>
							<p class="text-center no-margin">skin-green</p>
						</li>

						<li style="float:left; width: 33.33333%; padding: 5px;" theme-name="skin-blue">
							<a href="javascript:void(0);" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover" data-skin="skin-blue">
								<div><span style="display:block; width: 20%; float: left; height: 7px; background: #367fa9;"></span>
									<span class="bg-light-blue" style="display:block; width: 80%; float: left; height: 7px;"></span>
								</div>
								<div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span>
									<span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
								</div>
							</a>
							<p class="text-center no-margin">skin-blue</p>
						</li>

						<li style="float:left; width: 33.33333%; padding: 5px;" theme-name="skin-red">
							<a href="javascript:void(0);"
																				   data-skin="skin-red"
																				   style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
																				   class="clearfix full-opacity-hover">
							<div><span style="display:block; width: 20%; float: left; height: 7px;"
									   class="bg-red-active"></span><span class="bg-red"
																		  style="display:block; width: 80%; float: left; height: 7px;"></span>
							</div>
							<div><span
									style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span
									style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
							</div>
						</a>
							<p class="text-center no-margin">skin-red</p>
						</li>
						<li style="float:left; width: 33.33333%; padding: 5px;" theme-name="skin-yellow">
							<a href="javascript:void(0);"
																				   data-skin="skin-yellow"
																				   style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
																				   class="clearfix full-opacity-hover">
							<div><span style="display:block; width: 20%; float: left; height: 7px;"
									   class="bg-yellow-active"></span><span class="bg-yellow"
																			 style="display:block; width: 80%; float: left; height: 7px;"></span>
							</div>
							<div><span
									style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span
									style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
							</div>
						</a>
							<p class="text-center no-margin">skin-yellow</p>
						</li>

						<li style="float:left; width: 33.33333%; padding: 5px;" theme-name="skin-purple-light">
							<a href="javascript:void(0);"
																				   data-skin="skin-purple-light"
																				   style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
																				   class="clearfix full-opacity-hover">
							<div><span style="display:block; width: 20%; float: left; height: 7px;"
									   class="bg-purple-active"></span><span class="bg-purple"
																			 style="display:block; width: 80%; float: left; height: 7px;"></span>
							</div>
							<div><span
									style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span
									style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
							</div>
						</a>
							<p class="text-center no-margin">skin-purple-light</p>
						</li>
						<li style="float:left; width: 33.33333%; padding: 5px;" theme-name="skin-green-light">
							<a href="javascript:void(0);"
																				   data-skin="skin-green-light"
																				   style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
																				   class="clearfix full-opacity-hover">
							<div><span style="display:block; width: 20%; float: left; height: 7px;"
									   class="bg-green-active"></span><span class="bg-green"
																			style="display:block; width: 80%; float: left; height: 7px;"></span>
							</div>
							<div><span
									style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span
									style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
							</div>
						</a>
							<p class="text-center no-margin">skin-green-light</p>
						</li>
						<li style="float:left; width: 33.33333%; padding: 5px;" theme-name="skin-red-light">
							<a href="javascript:void(0);"
																				   data-skin="skin-red-light"
																				   style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
																				   class="clearfix full-opacity-hover">
							<div><span style="display:block; width: 20%; float: left; height: 7px;"
									   class="bg-red-active"></span><span class="bg-red"
																		  style="display:block; width: 80%; float: left; height: 7px;"></span>
							</div>
							<div><span
									style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span
									style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
							</div>
						</a>
							<p class="text-center no-margin">skin-red-light</p>
						</li>
						<li style="float:left; width: 33.33333%; padding: 5px;" theme-name="skin-yellow-light">
							<a href="javascript:void(0);"
																				   data-skin="skin-yellow-light"
																				   style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
																				   class="clearfix full-opacity-hover">
							<div><span style="display:block; width: 20%; float: left; height: 7px;"
									   class="bg-yellow-active"></span><span class="bg-yellow"
																			 style="display:block; width: 80%; float: left; height: 7px;"></span>
							</div>
							<div><span
									style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span
									style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span>
							</div>
						</a>
							<p class="text-center no-margin">skin-yellow-light</p>
						</li>
					</ul>
				</div>
			</div>

		</div>
	</div>
</section>

<script>

    $('.list-unstyled').on('click', 'li', function(e) {
        var themeName = $(this).attr("theme-name");
        parent.$("#${param.flagId}").val(themeName);//返回文件名称
        parent.layer.closeAll();
	});
</script>
</body>
</html>
